<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/layui/layui.js"></script>
    <link rel="stylesheet" href="lib/layui/css/layui.css">

</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">


        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <select name="sex" id="sex" class="sex">
                <option value=""></option>
                <option value="1">女</option>
                <option value="2">男</option>
            </select>
        </div>
        <!--        <label class="layui-form-label">性别</label>-->
        <!--        <div class="layui-input-inline" style="width: 220px">-->
        <!--            <input type="radio" name="sex" value="" title="未知" checked>-->
        <!--            <input type="radio" name="sex" value="2" title="男"  checked>-->
        <!--            <input type="radio" name="sex" value="1" title="女"  checked>-->
        <!--        </div>-->


        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" id="phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
        </div>


        <button class="layui-btn" lay-submit lay-filter="search">查询</button>
    </div>
</form>

<table id="demo" lay-filter="test"></table>

<form class="layui-form" action="" id="updateForm" lay-filter="updateFrom" hidden>
    <input type="hidden" name="id" id="update_id"/>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="update_name"  autocomplete="off" placeholder="请输入姓名" class="layui-input">
        </div>

        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <select name="sex"  id="update_sex" lay-filter="required">
                <option value=""></option>
                <option value="2">男</option>
                <option value="1">女</option>
            </select>
        </div>

        <label class="layui-form-label">出生日期</label>
        <div class="layui-input-inline">
            <input type="text" name="birthday" id="update_birthday"  placeholder="请输入出生日期" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">手机</label>
        <div class="layui-input-inline">
            <input type="tel" name="phone" id="update_phone"  autocomplete="off" class="layui-input" placeholder="请输入手机号">
        </div>


        <!--                <label class="layui-form-label">地址</label>-->
        <!--                <div class="layui-input-inline">-->
        <!--                    <input type="text" name="address" id="update_address" placeholder="请输入地址" autocomplete="off" class="layui-input">-->
        <!--                </div>-->

        <!--                <label class="layui-form-label">身份证</label>-->
        <!--                <div class="layui-input-inline">-->
        <!--                    <input type="text" name="id_card" id="update_id_card" placeholder="请输入身份证" autocomplete="off" class="layui-input">-->
        <!--                </div>-->

        <!--                <label class="layui-form-label">病例</label>-->
        <!--                <div class="layui-input-inline">-->
        <!--                    <input type="text" name="is_medicare" id="update_is_medicare" placeholder="请输入病例" autocomplete="off" class="layui-input">-->
        <!--                </div>-->

        <!--                <label class="layui-form-label">病例编号</label>-->
        <!--                <div class="layui-input-inline">-->
        <!--                    <input type="text" name="id_medicare" id="update_id_medicare" placeholder="请输入病例编号" autocomplete="off" class="layui-input">-->
        <!--                </div>-->

        <button class="layui-btn" lay-submit lay-filter="update">修改</button>
    </div>
</form>

<script>
    layui.use(['table','form','layer'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        //第一个实例
        table.render({
            id:'patientTable',
            elem: '#demo'
            ,url: '../getPatients' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '编号',fixed: 'left'}
                ,{field: 'name', title: '姓名'}
                ,{field: 'sex', title: '性别',templet:function (d){return d.sex==2?'男':'女'}}
                ,{field: 'birthday', title: '生日'}
                ,{field: 'phone', title: '手机'}
                ,{field: 'address', title: '住址'}
                ,{field: 'id_card', title: '身份证'}
                ,{field: 'is_medicare', title: '是否有医保卡',templet:function (d){return d.sex==2?'有':'没有'}}
                ,{field: 'id_medicare', title: '医保卡号'}
                ,{field: 'created_time', title: '创建时间'}
                ,{field: 'updated_time', title: '修改时间'}
                ,{fixed: 'right', width:210, align:'center', toolbar: '#barDemo'}
            ]]
        });



        //工具条事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么?', function(index){
                    $.post("../delPatient",{
                        id: data.id
                    },function(res){//res就是服务器返回的数据{"code":"0","mag":"删除成功"}
                        if(res.code == "0"){//删除成功
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                        }
                        layer.msg(res.msg);
                    },"json");

                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type:1,
                    content:$("#updateForm")
                })
                //form.val('update_form',data);
                $("#update_phone").val(data.phone);
                $("#update_id").val(data.id);
                $("#update_name").val(data.name);
                $("#update_sex").val(data.sex);
                $("#update_birthday").val(data.birthday);
                // $("#update_address").val(data.address);
                // $("#update_id_card").val(data.id_card);
                // $("#update_id_medicare").val(data.id_medicare);
                // $("#update_is_medicare").val(data.is_medicare);
                form.render();
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
            return false;
        });



        form.on('submit(search)',function (data){
            table.reload('patientTable',{
                url: '../getPatients',
                where:{
                    name:$("#name").val(),
                    sex:$("#sex").val(),
                    // sex:$("input[name='sex']:checked").val(),
                    phone:$("#phone").val()
                }
            });
            return false;
        });

        form.on('submit(update)', function(data){
            $.post("../updatePatient",$("#updateForm").serialize(),function (res){
                if (res.code == "0"){
                    layer.closeAll();
                    table.reload('patientTable');
                }
                layer.msg(res.msg);
            },"json");
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });



    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>